<template>
  <div class="preloader-wrapper"></div>
  <p class="p1">智能助手小文</p>
  <p class="p3">
    ...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
  </p>
  <p class="p2">正在飞速赶来</p>
</template>

<script>
export default {};
</script>

<style scoped lang="less">
@font-face {
  font-family: "Zhu";
  src: url("../assets/fonts/MaokenZhuyuanTi.ttf");
}
.preloader-wrapper {
  position: absolute;
  left: 649px;
  top: 240px;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 50px;
}
.preloader-wrapper:before {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: blue;
  content: "";
  position: absolute;
  background: #9b59b6;
  animation: preloader_before 2s infinite ease-in-out;
}
.preloader-wrapper:after {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: blue;
  content: "";
  position: absolute;
  background: #2ecc71;
  left: 22px;
  animation: preloader_after 1.5s infinite ease-in-out;
}
@keyframes preloader_before {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(50px) scale(1.2) rotate(260deg);
    background: #2ecc71;
    border-radius: 0px;
  }
  100% {
    transform: translateX(0px) rotate(0deg);
  }
}
@keyframes preloader_after {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-50px) scale(1.2) rotate(-260deg);
    background: #9b59b6;
    border-radius: 0px;
  }
  100% {
    transform: translateX(0px);
  }
}
.p1 {
  color: #bacbd9;
  font-size: 18px;
  z-index: 2;
  position: absolute;
  top: 330px;
  animation: text 4s ease infinite;
  width: 400px;
  text-align: center;
}
.p2 {
  color: #bacbd9;
  font-size: 18px;
  z-index: 2;
  position: absolute;
  top: 355px;
  animation: text 4s ease infinite;
  width: 400px;
  text-align: center;
}
.p3 {
  color: #bacbd9;
  font-size: 18px;
  z-index: 2;
  position: absolute;
  top: 340px;
  animation: text 4s ease infinite;
  width: 400px;
  text-align: center;
}
@keyframes text {
  0% {
    transform: translateX(-3px);
    letter-spacing: 0px;
    color: #bacbd9;
  }
  25% {
    letter-spacing: 3px;
    color: #7ea1bf;
  }
  50% {
    transform: translateX(3px);
    letter-spacing: 0px;
    color: #bacbd9;
  }
  75% {
    letter-spacing: 3px;
    color: #7ea1bf;
  }
  100% {
    transform: translateX(-3px);
    letter-spacing: 0px;
    color: #bacbd9;
  }
}
</style>
